<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Map - Display a map</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
<style type="text/css">
  html, body {
    margin: 0;
    height: 100%;
    width: 100%
  }
  .container {
    width: 100%;
    height: 100%
  }
</style>
<body>

<div id="map" class="container"></div>
<script src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//axios/dist/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.js"></script>
<script src="//cdn.jsdelivr.net/npm/chroma-js@2.1.0/chroma.js"></script>
<script src="../packages/maptalks/dist/maptalks-wind.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/@sakitam-gis/maptalks-wind/dist/maptalks-wind.js"></script>-->
<script>
  const map = new maptalks.Map('map', {
    // center: [113.53450137499999, 34.44104525],
    zoom: 2,
    center: [34.371, 131.287].reverse(),
    // zoom: 4
    baseLayer: new maptalks.TileLayer('base', {
      urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
      // urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
      subdomains: ['a', 'b', 'c', 'd'],
    })
  });

  window.map = map;

  fetch('https://sakitam-fdd.github.io/wind-layer/data/wind.json')
  // fetch('./data/wind.json')
    .then(res => res.json())
    .then(res => {
      // const range = vectorField.range || [0.02, 28.21618329965979];
      // const scale = chroma.scale('OrRd').domain(range);

      const velocityScales = {
        0: 1 / 20,
        1: 1 / 20,
        2: 1 / 20,
        3: 1 / 30,
        4: 1 / 40,
        5: 1 / 50,
        6: 1 / 60,
        7: 0.003,
        8: 0.002,
        9: 0.001,
        10: 0.0005,
        11: 0.0003,
        12: 0.00015,
        13: 0.0001,
        14: 0.00005,
        15: 0.000025,
        16: 0.00001,
        17: 0.000005,
        18: 0.000002,
        19: 0.000001,
        20: 0.0000005,
        21: 0.0000002,
        22: 0.0000001,
      };

      // res = res.map((item, idx) => {
      //   item.header = Object.assign(item.header, {
      //     parameterCategory: 1,
      //     parameterNumber: idx === 0 ? 2 : 3,
      //   });
      //   return item;
      // });

      const windLayer = new MaptalksWind.WindLayer('wind', res, {
        windOptions: {
          // colorScale: (m) => {
          //   // console.log(m);
          //   return '#fff';
          // },
          // colorScale: [
          //   "rgb(36,104, 180)",
          //   "rgb(60,157, 194)",
          //   "rgb(128,205,193 )",
          //   "rgb(151,218,168 )",
          //   "rgb(198,231,181)",
          //   "rgb(238,247,217)",
          //   "rgb(255,238,159)",
          //   "rgb(252,217,125)",
          //   "rgb(255,182,100)",
          //   "rgb(252,150,75)",
          //   "rgb(250,112,52)",
          //   "rgb(245,64,32)",
          //   "rgb(237,45,28)",
          //   "rgb(220,24,32)",
          //   "rgb(180,0,35)"
          // ],
          colorScale: '#fff',
          velocityScale: () => {
            const zoom = map.getZoom();
            return velocityScales[zoom] || 1 / 40;
          },
          // paths: 5000,
          frameRate: 16,
          maxAge: 60,
          globalAlpha: 0.9,
          // velocityScale: 0.5,
          // paths: 10000,
          paths: 3782,
        },
      });

      const color = {
        temp: [[203,[115,70,105,255]],
          [218,[202,172,195,255]],
          [233,[162,70,145,255]],
          [248,[143,89,169,255]],
          [258,[157,219,217,255]],
          [265,[106,191,181,255]],
          [269,[100,166,189,255]],
          [273.15,[93,133,198,255]],
          [274,[68,125,99,255]],
          [283,[128,147,24,255]],
          [294,[243,183,4,255]],
          [303,[232,83,25,255]],
          [320,[71,14,0,255]]],
        wind: [
          [0,[98,113,183,255]],
          [1,[57,97,159,255]],
          [3,[74,148,169,255]],
          [5,[77,141,123,255]],
          [7,[83,165,83,255]],
          [9,[53,159,53,255]],
          [11,[167,157,81,255]],
          [13,[159,127,58,255]],
          [15,[161,108,92,255]],
          [17,[129,58,78,255]],
          [19,[175,80,136,255]],
          [21,[117,74,147,255]],
          [24,[109,97,163,255]],
          [27,[68,105,141,255]],
          [29,[92,144,152,255]],
          [36,[125,68,165,255]],
          [46,[231,215,215,255]],
          [51,[219,212,135,255]],
          [77,[205,202,112,255]],
          [104,[128,128,128,255]]
        ],
      };

      const windInterpolateColor = color.wind.reduce((result, item, key) => result.concat(item[0], 'rgba(' + item[1].join(',') + ')'), []);
      const tempInterpolateColor = color.temp.reduce((result, item, key) => result.concat(item[0] - 273.15, 'rgba(' + item[1].join(',') + ')'), []);

      const scalarLayer = new MaptalksWind.ScalarLayer('scalar', {
        // "type": "jsonArray",
        // "data": res,
        "type": "image",
        "url": "./data/var_ugrd-var_vgrd.png",
        "extent": [
          [-180, 85.051129],
          [-180, -85.051129],
          [180, 85.051129],
          [180, -85.051129],
        ],
        // "width": res[0]['header']['nx'],
        // "height": res[0]['header']['ny'] - 1,
        // max: 42.25002441406252,
        // min: -50.84996643066404,
        // "uMin": res[0]['header']['min'],
        // "uMax": res[0]['header']['max'],
        // "vMin": res[1]['header']['min'],
        // "vMax": res[1]['header']['max'],
        "width": 1440,
        "height": 720,
        "uMin": -21.34380340576172,
        "uMax": 30.7261962890625,
        "vMin": -23.916271209716797,
        "vMax": 24.693727493286133,
      }, {
        styleSpec: {
          'fill-color': [
            'interpolate',
            ['linear'],
            ['get', 'value'],
            ...windInterpolateColor
          ],
          'opacity': [
            'interpolate',
            ['exponential', 0.5],
            ['zoom'],
            5,
            0.5,
            8,
            1
          ],
        },
        renderForm: 'rg',
        // colorScale: [
        //   'rgba(36, 104, 180, 0.5)',
        //   'rgba(60, 157, 194, 0.5)',
        //   'rgba(128, 205, 193, 0.5)',
        //   'rgba(151, 218, 168, 0.5)',
        //   'rgba(198, 231, 181, 0.5)',
        //   'rgba(238, 247, 217, 0.5)',
        //   'rgba(255, 238, 159, 0.5)',
        //   'rgba(252, 217, 125, 0.5)',
        //   'rgba(255, 182, 100, 0.5)',
        //   'rgba(252, 150, 75, 0.5)',
        //   'rgba(250, 112, 52, 0.5)',
        //   'rgba(245, 64, 32, 0.5)',
        //   'rgba(237, 45, 28, 0.5)',
        //   'rgba(220, 24, 32, 0.5)',
        //   'rgba(180, 0, 35, 0.5)',
        // ],
      });

      const tempLayer = new MaptalksWind.ScalarLayer('temp', {
        // "type": "jsonArray",
        // "data": res,
        "type": "image",
        "url": "./data/var_tmp.png",
        "extent": [
          [-180, 85.051129],
          [-180, -85.051129],
          [180, 85.051129],
          [180, -85.051129],
        ],
        "width": 1440,
        "height": 720,
        "min": -50.84996643066404,
        "max": 42.25002441406252,
      }, {
        styleSpec: {
          'fill-color': [
            'interpolate',
            ['linear'],
            ['get', 'value'],
            ...tempInterpolateColor
          ],
          'opacity': [
            'interpolate',
            ['exponential', 0.5],
            ['zoom'],
            5,
            0.5,
            8,
            1
          ],
        },
        renderForm: 'r',
        // colorScale: [
        //   'rgba(36, 104, 180, 0.5)',
        //   'rgba(60, 157, 194, 0.5)',
        //   'rgba(128, 205, 193, 0.5)',
        //   'rgba(151, 218, 168, 0.5)',
        //   'rgba(198, 231, 181, 0.5)',
        //   'rgba(238, 247, 217, 0.5)',
        //   'rgba(255, 238, 159, 0.5)',
        //   'rgba(252, 217, 125, 0.5)',
        //   'rgba(255, 182, 100, 0.5)',
        //   'rgba(252, 150, 75, 0.5)',
        //   'rgba(250, 112, 52, 0.5)',
        //   'rgba(245, 64, 32, 0.5)',
        //   'rgba(237, 45, 28, 0.5)',
        //   'rgba(220, 24, 32, 0.5)',
        //   'rgba(180, 0, 35, 0.5)',
        // ],
      });

      console.log(map, windLayer);

      function initGui(windLayer) {
        const config = {
          addLayer: true,
          scalarLayer: false,
          tempLayer: true,
          paths: 1000,
          lineWidth: 3,
          velocityScale: 0.005,
          globalAlpha: 0.8,
          maxAge: 90,
        };

        const gui = new dat.GUI();
        const folder1 = gui.addFolder('粒子图层');
        folder1.add(config, 'addLayer').onChange(function () {
          if (config.addLayer) {
            window.map.addLayer(windLayer);
          } else {
            window.map.removeLayer(windLayer);
          }
        });
        folder1.add(config, 'globalAlpha', 0.01, 1).onChange(function () {
          windLayer.setWindOptions({
            globalAlpha: config.globalAlpha,
          });
        });
        folder1.add(config, 'maxAge', 1, 200).onChange(function () {
          windLayer.setWindOptions({
            maxAge: config.maxAge,
          });
        });

        folder1.add(config, 'paths', 500, 8000).onChange(function () {
          windLayer.setWindOptions({
            paths: config.paths,
          });
        });

        folder1.add(config, 'lineWidth', 1, 10).onChange(function () {
          windLayer.setWindOptions({
            lineWidth: config.lineWidth,
          });
        });

        folder1.add(config, 'velocityScale', 0, 0.1).onChange(function () {
          windLayer.setWindOptions({
            velocityScale: config.velocityScale,
          });
        });

        window.folder1 = folder1;

        const folder2 = gui.addFolder('风色斑图');

        folder2.add(config, 'scalarLayer').onChange(function () {
          if (config.scalarLayer) {
            window.map.addLayer(scalarLayer);
          } else {
            window.map.removeLayer(scalarLayer);
          }
        });

        const folder3 = gui.addFolder('温度色斑图');

        folder3.add(config, 'tempLayer').onChange(function () {
          if (config.tempLayer) {
            window.map.addLayer(tempLayer);
          } else {
            window.map.removeLayer(tempLayer);
          }
        });
      }

      map.addLayer(tempLayer);
      // map.addLayer(scalarLayer);
      map.addLayer(windLayer);

      initGui(windLayer);
    });
</script>
</body>
</html>
